<template>
  <div
    style="
      padding-top: 10px;
      padding-bottom: 5px;
      padding-left: 10px;
      font-weight: bold;
      user-select: none;
    "
  >
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>Access IP Management</el-breadcrumb-item>
      <el-breadcrumb-item>
        <div style="font-weight: bold; color: #606266">Rejection Record</div>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="inputForm">
    <div class="inputItem">
      <div class="label">IP地址</div>
      <div class="value">
        <el-input
          v-model="accessRejectionCollect.ipAddress"
          style="width: 100%; height: 100%"
          clearable
          placeholder="IP地址"
        />
      </div>
    </div>

    <div class="inputItem">
      <div class="label">日期</div>
      <div class="value">
        <el-input
          v-model="accessRejectionCollect.date"
          style="width: 100%; height: 100%"
          clearable
          placeholder="日期"
        />
      </div>
    </div>

    <div class="buttonItem">
      <div class="label">操作</div>
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        :icon="Search"
        @click="getRejectionCollect"
      >
        条件查询
      </el-button>
      <el-button
        style="height: 100%"
        v-once-click
        color="#626aef"
        plain
        :icon="Refresh"
        @click="resetSearch"
      >
        重置查询
      </el-button>
    </div>
  </div>

  <!-- 表格 -->
  <div class="table">
    <div class="operationBar">
      <div class="label">系统接口访问失败数量记录表格</div>
    </div>

    <el-table
      :data="records"
      stripe
      style="width: 100%"
      :headerCellStyle="headerCellStyle"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column property="date" label="date"> </el-table-column>
      <el-table-column property="ipAddress" label="ipAddress" />
      <el-table-column property="startPeriod" label="startPeriod" />
      <el-table-column property="endPeriod" label="endPeriod" />
      <el-table-column property="rejectionCount" label="rejectionCount" />
      <el-table-column property="createTime" label="createTime" />
    </el-table>

    <div class="paginationBar">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :background="true"
        :total="total"
        :page-sizes="[20, 30, 40, 50, 60]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Refresh, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { getRejectionCollectApi } from '@/request/api/accessRejectionCollect'

onMounted(() => {
  getRejectionCollect()
})

const headerCellStyle = () => {
  let style = {
    'background-color': '#C8E0E4',
    color: '#444444',
  }

  return style
}

// 表格记录
const records = ref<AccessRejectionCollect[]>([])
// 筛选条件
const accessRejectionCollect = ref<AccessRejectionCollect>({
  ipAddress: '',
  date: null,
})

const total = ref<number>(0)
const pageNum = ref<number>(1)
const pageSize = ref<number>(20)
const handlePageNumChange = (val: number) => {
  pageNum.value = val
  getRejectionCollect()
}
const handlePageSizeChange = (val: number) => {
  pageSize.value = val
  getRejectionCollect()
}

// 获取表格信息
const getRejectionCollect = async () => {
  const res = await getRejectionCollectApi(
    accessRejectionCollect.value,
    pageNum.value,
    pageSize.value
  )
  if (res.code != 200) return ElMessage.error('获取表格数据失败')

  records.value = res.data.records
  total.value = res.data.total
}

const resetSearch = () => {
  accessRejectionCollect.value = {
    ipAddress: '',
    date: null,
  }
  getRejectionCollect()
}
</script>

<style lang="less" scoped>
.inputForm {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  align-items: center;

  > .inputItem {
    height: 40px;
    width: 350px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 20px;
    background-color: #cfcdcd21;

    > .label {
      width: 120px;
      height: 100%;
      font-size: 15px;
      font-weight: bold;
      color: #606266;
      user-select: none;
      background-color: #c8e0e4;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 5px;
      padding-right: 5px;
    }

    > .value {
      flex: 1;
      display: flex;
      height: 100%;
      border-radius: 4px;
      box-shadow: 0 0 1px 1px #bdbdbd8a;
    }
  }

  > .buttonItem {
    height: 40px;
    display: flex;
    align-items: center;
    padding-right: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    background-color: #cfcdcd21;

    > .label {
      width: 120px;
      height: 100%;
      font-size: 15px;
      font-weight: bold;
      color: #606266;
      user-select: none;
      background-color: #c8e0e4;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
    }
  }
}

.table {
  box-shadow: 0 0 1px 2px #ececec;
  border-radius: 6px;
  margin-top: 10px;

  > .operationBar {
    display: flex;
    align-items: center;
    padding: 10px 0;
    height: 30px;

    > .label {
      font-size: 15px;
      font-weight: bold;
      color: #606266;
      user-select: none;
      padding: 0px 10px;
    }
  }

  > .paginationBar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 0px;
  }
}
</style>
